import React, { Component } from 'react';

/*
  学习目标：生命周期 - 挂载时
  三个阶段
     1. 挂载时
     2. 更新时
     3. 卸载时
*/

export default class App extends Component {
  // 1.1 对标VUe中的beforeCreate 和 created
  constructor() {
    // super表示继承，从父级继承所有的属性和方法
    super();
    console.log('constructor被执行了  ----->  ');

    // 作用：声明状态和创建ref
    // 💥 现在几乎不用这种方式声明状态和创建ref，👍推荐使用简写
    // this.state = {
    //   msg: '123',
    // };

    // this.iptRef = React.createRef();
  }

  // 1.2 表示要渲染的内容
  render() {
    console.log('render被执行了  ----->  ');
    return (
      <div>
        <h1>helloReact</h1>
      </div>
    );
  }

  // cdm
  // 1.3  对标vue中的mounted，表示挂载真实DOM之后
  // 作用：1. 💥发请求  2. 最先获取DOM
  componentDidMount() {
    console.log('componentDidMount执行了  ----->  ');
    const h1Node = document.querySelector('h1');
    console.log('h1Node  ----->  ', h1Node);
  }
}
